<template>
  <q-scroll-area
    class="panel-container"
    :thumb-style="thumbStyle"
    :bar-style="barStyle"
  >
    <div class="q-gutter-sm my-text-overflow">
      <!-- 选中的是node-key   -->
      <q-tree
        icon="mdi-key"
        ref="myTreeRef"
        :nodes="list"
        node-key="sid"
        label-key="name"
        selected-color="primary"
        v-model:selected="selectedItem"
        @update:selected="onSelectedItem"
      />
    </div>
  </q-scroll-area>

</template>

<script>
import { defineComponent, ref, reactive, toRefs, PropType } from 'vue';

export default defineComponent({
  name: 'TreeNode',
  props: {
    list: {
      type: Array,
      require: true
    }
  },
  emits: ['update-item'],
  setup (props, context) {
    //数据解构
    const {
      list
    } = toRefs(props);

    //响应数据
    let selectedItem = ref('');
    let myTreeRef = ref(null);

    //滚动条样式
    const thumbStyle = reactive({
      right: '4px',
      borderRadius: '5px',
      backgroundColor: '#027be3',
      width: '5px',
      opacity: 0.75
    });

    //滚动轨道样式
    const barStyle = reactive({
      right: '2px',
      borderRadius: '9px',
      backgroundColor: '#027be3',
      width: '9px',
      opacity: 0.35
    });

    //响应变化
    const onSelectedItem = () => {
      //selectedItem存储value，为tree的key值
      //console.log(selectedItem.value);
      context.emit('update-item', selectedItem.value);
    }

    return {
      list,
      selectedItem,
      myTreeRef,
      thumbStyle,
      barStyle,

      onSelectedItem
    };
  }

});
</script>

<style lang="scss" scoped>
.panel-container {
  height: 70vh;
  width: 100%;

  overflow: hidden;
  white-space: nowrap;
}
</style>
